/*
* 这是webpack配置文件
* 只是webpack干那些活 当运行webpack指令时,会加载这里的配置
* 所有的构建工具都是基于nodejs平台运行的
* 模块化默认采用commonjs
* */

//resolve 是用来拼接绝对路径的方法
const {resolve} = require('path')

//nodejs方式
module.exports = {
    //webpack配置
    //入口起点
    entry:'./src/index.js',
    //输出
    output:{
        //输出文件名
        filename:'built.js',
        //输出路径 __dirname是nodejs的变量 代表当前文件目录的绝对路径
        path:resolve(__dirname,'build') //__dirname和build进行拼接
    },
    //loader的配置
    module:{
        rules:[
            //详细的loader配置 不同的文件必修配置不同的loader处理
            //处理css文件的配置
            {
                //匹配哪些文件
                test:/\.css$/,
                //使用哪些loader处理
                use:[
                    //use数组中loader执行顺序:从右到左,从下到上
                    //创建一个style标签,将js中的样式资源插入进去,添加到head中生效,后执行
                    'style-loader',
                    //将css文件以样式字符串的形式变成commonjs模块加载到js中,先执行
                    'css-loader',
                    //
                    'less-loader'
                ]
            },
            //处理less的配置
            {
                test:/\.less$/,
                use:[
                    'style-loader',//3
                    'css-loader',//2
                    //将css编译成css
                    //需要下载less-loader和less
                    'less-loader'//1

                ]
            }
        ]
    },
    //plugins配置
    plugins:[
        //详细的plugins配置
    ],
    //模式
    mode:'development',
    // mode:'production',
}